<template>
  <page-header :title="headerTitle" background="#F7F0E6" />
  <view class="body">
    <view class="content" v-for="item in Data.list" :key="item.postId" @tap="gotoPostDetail(item.postId)">
      <view class="update-time">
        {{ String(item.updateTime).substring(0, 16) }}
      </view>
      <view class="card">
        <image v-if="item.files.length > 0" class="img" :src="item.files[0].fileUrl" mode="aspectFill" />
        <image v-else class="img" src="../../static/empty-img/no-img.gif" mode="aspectFill" />
        <view class="header">
          <view class="title text-overflow">
            {{ item.title }}
          </view>
          <view class="status have-not" v-if="judgeTime(item.startTime, item.endTime) == 0">
            未开始
          </view>
          <view class="status start" v-else-if="judgeTime(item.startTime, item.endTime) == 1">
            进行中
          </view>
          <view class="status end" v-else>
            已结束
          </view>
        </view>
        <view class="body">
          <view class="time text-overflow">{{ item.startTime }}</view>
          <view class="location text-overflow">{{ item.location || '暂无地址' }}</view>
        </view>
      </view>
    </view>
    <view v-if="isLoadAll && Data.list.length > 0" class="nomore">
      没有更多了，看看别的吧
    </view>
  </view>
  <empty-img v-if="empty">
    <template #text>
      该专区暂时没有活动哦~
    </template>
  </empty-img>
</template>
<script setup>
  import {
    ref
  } from 'vue';
  const navIndex = ref(0)
  onLoad((options) => {
    navIndex.value = options.index
    changeQueryId(options.index)
    getList() //获取帖子列表
  })
  /**
   * 查询条件
   */
  const Data = ref({})
  const empty = ref(true)
  const queryData = ref({
    pageSize: 10,
    pageNum: 1,
    columns: "updateTime",
    orders: "DESC",
    title: "",
    sectionId: "",
    userId: "",
    sysType: "2",
  })
  const getList = () => {
    uni.showLoading()
    http.request({
      url: '/mall4cloud_point/ua/post/page',
      method: 'GET',
      data: queryData.value
    }).then((res) => {
      if (queryData.value.pageNum === 1) {
        Data.value = res
      } else {
        let list = Data.value.list
        list.push(...res.list)
        Data.value.list = list
      }
      if (res.total == 0) {
        empty.value = true
      } else {
        empty.value = false
      }
      if (queryData.value.pageNum === Data.value.pages) {
        isLoadAll.value = true
      }
      uni.hideLoading()
    })
  }
  /**
   * 页面上拉触底事件的处理函数
   */
  const isLoadAll = ref(false)
  onReachBottom(() => {
    if (queryData.value.pageNum < Data.value.pages) {
      queryData.value.pageNum = queryData.value.pageNum + 1
      getList()
    } else {
      isLoadAll.value = true
    }
  })
  /**
   * 根据导航切换查询条件
   */
  const headerTitle = ref('活动专区')
  const changeQueryId = (index) => {
    if (index == -1) return
    if (index == 0) {
      queryData.value.sectionId = 1
      headerTitle.value = '文化热点'
      return
    }
    if (index == 1) {
      queryData.value.sectionId = 5
      headerTitle.value = '精选周边'
      return
    }
    if (index == 2) {
      queryData.value.sectionId = 6
      headerTitle.value = '演出门票'
      return
    }
    if (index == 3) {
      queryData.value.sectionId = 7
      headerTitle.value = '创意集市'
      return
    }
  }
  /**
   * 根据活动时间判断是否未开始，进行中，已结束
   */
  const judgeTime = (start, end) => {
    const startTime = new Date(start.replace(/\-/g, '/'));
    const endTime = new Date(end.replace(/\-/g, '/'));
    const currentTime = new Date();
    if (currentTime < startTime) {
      return 0
    } else if (currentTime >= startTime && currentTime <= endTime) {
      return 1
    } else {
      return 2
    }
  }
  /**
   * 去帖子详情
   */
  const gotoPostDetail = (id) => {
    uni.navigateTo({
      url: '/pages/activity-detail/activity-detail?id=' + id
    })
  }
</script>
<style lang="scss" scoped>
  @use 'activity-zone';
</style>
